<!DOCTYPE html>

<html xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core">


<h:head>



	<style type="text/css">
	
	
.content {
	position: relative;
	width: 100%;
	margin: 0 auto;
}


.ui-layout,.ui-layout-doc,.ui-layout-unit,.ui-layout-wrap,.ui-layout-bd,.ui-layout-hd
	{
	border: none;
}

.companyHeaderGrid tr,.companyHeaderGrid td {
	border: none;
}

.ui-widget-content .ui-datatable-empty-message {
	color: #AA0000;
	font-size: 13pt;
	font-weight: bold;
}

.cancel-btn,.ui-widget-content .cancel-btn {
	-moz-box-shadow: inset 0px 1px 0px 0px #fce2c1;
	-webkit-box-shadow: inset 0px 1px 0px 0px #fce2c1;
	box-shadow: inset 0px 1px 0px 0px #fce2c1;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffc477
		), color-stop(1, #fb9e25));
	background: -moz-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
	background: -webkit-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
	background: -o-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
	background: -ms-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
	background: linear-gradient(to bottom, #ffc477 5%, #fb9e25 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477',
		endColorstr='#fb9e25', GradientType=0);
	background-color: #ffc477;
	-moz-border-radius: 13px;
	-webkit-border-radius: 13px;
	border-radius: 13px;
	border: 1px solid #eeb44f;
	display: inline-block;
	cursor: pointer;
	color: #ffffff;
	font-family: arial;
	font-size: 14px;
	font-weight: bold;
	padding: 4px 8px;
	text-decoration: none;
	text-shadow: 0px 1px 0px #cc9f52;
}

.cancel-btn:hover {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fb9e25
		), color-stop(1, #ffc477));
	background: -moz-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
	background: -webkit-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
	background: -o-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
	background: -ms-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
	background: linear-gradient(to bottom, #fb9e25 5%, #ffc477 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25',
		endColorstr='#ffc477', GradientType=0);
	background-color: #fb9e25;
}

.cancel-btn:active {
	position: relative;
	top: 1px;
}
</style>

</h:head>

<h:body>
	<img class="content" src="#{resource['images/top.jpg']}" alt="immagine top"></img>

	<!-- Importo il css per la customizzazione della pagina -->
	<h:outputStylesheet name="css/custom.css" />


	<!-- Evento che mi permette di caricare le escursioni dal DB prima di renderizzare la pagina -->
	<f:view contentType="text/html">
		<f:event type="preRenderView"
			listener="#{escursioneBean.caricaEscursioniCustom}" />
	</f:view>


	<p:layout fullPage="false" style=" min-width: 90%; min-height:600px;">

		<p:layoutUnit position="north"
			style="min-height:100px; font-size: 13pt">
			<p:toolbar>
				<p:toolbarGroup align="right">
					<h:form>
						<p:commandButton id="logoutButton" value="Logout"
							icon="ui-icon-play" action="#{logoutBean.logout()}" />
					</h:form>
				</p:toolbarGroup>
			</p:toolbar>
		</p:layoutUnit>


		<!-- START - ZONA SX DELLA PAGINA -->
		<p:layoutUnit position="west" collapsible="true" size="22%" gutter="0">

			<!-- Inserisco dal file left_menu (della cartella corrente) il menu con i comandi -->
			<ui:insert name="left-menu">
				<div style="padding: 0px 0px 0px 0px">
					<ui:include src="left_menu.xhtml" />
				</div>
			</ui:insert>

		</p:layoutUnit>
		<!-- STOP - ZONA SX DELLA PAGINA -->
		
		<p:layoutUnit position="center" style="padding-left: 10px;"
			size="100%" id="packet_data_unit">

			<h:form id="escursioni_filter_form">


				<p:panelGrid columns="4" style="min-width: 100%"
					styleClass="companyHeaderGrid">

					<f:facet name="header">
						<h:form>
							<div style="display: inline-block; float: left">

								<p:commandButton value="Annulla Inserimento"
									styleClass="cancel-btn"
									actionListener="#{pacchettoBean.clearNuovoPacchetto}"
									oncomplete="window.location.href='dashboard.xhtml'" />

							</div>

							<p:outputLabel style="font-size: 13pt; float:center">
								Escursioni per #{pacchettoBean.nuovoPacchetto.citta.name} 
							</p:outputLabel>
						</h:form>
					</f:facet>

					<h:outputLabel for="city" value="Citta: " />
					<p:autoComplete id="city"
						value="#{escursioneBean.datiFiltro.citta}" label="Citta Partenza"
						completeMethod="#{cittaBean.complete}" var="c" readonly="true"
						itemLabel="#{c.name}" minQueryLength="3" itemValue="#{c}"
						forceSelection="true" converter="cittaConverter">

						<p:ajax event="itemSelect" update="city" />

					</p:autoComplete>


					<f:facet name="footer">
					</f:facet>

				</p:panelGrid>
			</h:form>


			<h:form id="escursione_list_form">
				<!-- START - Tabella dei escursioni -->



				<p:growl id="growlNewPacket" for="growl_new_packet_error"
					severity="warn" showDetail="true" autoUpdate="true" />

				<p:dataTable value="#{escursioneBean.listaEscursioniFiltrate}"
					var="escursione" id="escursioni_table" rows="10"
					emptyMessage="Non ci sono escursioni per #{pacchettoBean.nuovoPacchetto.citta.name}"
					selection="#{pacchettoBean.nuovoPacchetto.escursionis}"
					rowKey="#{escursione.idEscursione}" scrollable="true"
					liveScroll="true" scrollHeight="250">

					<!-- Definisco cosa deve fare con la selezione -->
					<p:ajax event="rowSelect" update=":escursione_list_form" />



					<f:facet name="header"> Escursioni disponibili per #{pacchettoBean.nuovoPacchetto.citta.name} </f:facet>

					<!-- includo la colonna per la selezione di pi�� escursioni per il pacchetto-->
					<p:column selectionMode="multiple" style="width:15%" />

					<p:column>
						<f:facet name="header"> Citta </f:facet>
									#{escursione.citta.name}
								</p:column>

					<p:column>
						<f:facet name="header"> Descrizione </f:facet>
									#{escursione.descrizione}
								</p:column>

					<p:column>
						<f:facet name="header"> Prezzo </f:facet>
									#{escursione.prezzo}
								</p:column>

				</p:dataTable>

				<!-- END - Tabella dei escursioni -->

				<p:commandButton value="Verifica dati e continua..."
					onclick="PF('dlg').show()"
					action="#{pacchettoBean.customEscursioniPacchetto()}" />

				<!-- DIALOG DI RICHIESTA INSERIMENTO DI ALMENO UN ESCURSIONE -->
				<p:dialog widgetVar="dlg" draggable="false" closable="true"
					modal="false" hideEffect="slide" showEffect="fade"
					position="center" showHeader="true" width="250px" height="150px">
					<f:facet name="header">
					Attenzione!
					</f:facet>
					
					E' necessario selezionare almeno un'escursione per il pacchetto corrente
					<f:facet name="footer">
						<p:commandButton value="Chiudi" oncomplete="PF('dlg').hide()" />
					</f:facet>


				</p:dialog>
			</h:form>


		</p:layoutUnit>

	</p:layout>
	<img class="content" src="#{resource['images/bottom.jpg']}" alt="immagine top"></img>

</h:body>
</html>